<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国际化日期工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .description {
            text-align: center;
            margin-bottom: 30px;
            color: #666;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        input,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }

        .date-locale-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .date-locale-container .form-group {
            flex: 1;
        }

        .result-container {
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .result-card {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .result-card h3 {
            margin-bottom: 10px;
            color: #409eff;
            font-size: 16px;
        }

        .result-item {
            display: flex;
            margin-bottom: 8px;
        }

        .result-item .label {
            font-weight: 600;
            width: 120px;
            color: #606266;
        }

        .result-item .value {
            flex: 1;
        }

        .locale-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .copy-btn {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 10px;
        }

        .copy-btn:hover {
            background-color: #66b1ff;
        }

        .examples {
            margin-top: 30px;
        }

        .examples h2 {
            margin-bottom: 15px;
            font-size: 18px;
        }

        .example-item {
            background-color: #f0f9ff;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>国际化日期工具</h1>
        <p class="description">一个多语言日期转换工具，支持不同国家和地区的日期格式展示</p>

        <div class="date-locale-container">
            <div class="form-group">
                <label for="date-input">选择日期</label>
                <input type="date" id="date-input" value="">
            </div>

            <div class="form-group">
                <label for="locale-select">选择语言/地区</label>
                <select id="locale-select">
                    <option value="zh-CN">中文 (中国)</option>
                    <option value="en-US">英文 (美国)</option>
                    <option value="ja-JP">日文 (日本)</option>
                    <option value="ko-KR">韩文 (韩国)</option>
                    <option value="de-DE">德文 (德国)</option>
                    <option value="fr-FR">法文 (法国)</option>
                    <option value="es-ES">西班牙文 (西班牙)</option>
                    <option value="it-IT">意大利文 (意大利)</option>
                    <option value="ru-RU">俄文 (俄罗斯)</option>
                    <option value="ar-SA">阿拉伯文 (沙特阿拉伯)</option>
                </select>
            </div>
        </div>

        <div class="result-container">
            <div class="result-card">
                <h3>当前选择的日期信息</h3>
                <div class="result-item">
                    <div class="label">星期名称:</div>
                    <div class="value" id="weekday-result">-</div>
                </div>
                <div class="result-item">
                    <div class="label">月份名称:</div>
                    <div class="value" id="month-result">-</div>
                </div>
                <div class="result-item">
                    <div class="label">完整日期:</div>
                    <div class="value" id="full-date-result">-</div>
                </div>
                <div class="result-item">
                    <div class="label">短格式日期:</div>
                    <div class="value" id="short-date-result">-</div>
                </div>
                <button class="copy-btn" id="copy-btn">复制日期信息</button>
            </div>

            <div class="result-card">
                <h3>多语言日期对照表</h3>
                <p>查看当前选择的日期在不同语言下的星期名称:</p>
                <div class="locale-grid" id="locale-grid">
                    <!-- 这里将通过JS动态生成内容 -->
                </div>
            </div>
        </div>

        <div class="examples">
            <h2>实际应用场景示例</h2>
            <div class="example-item">
                <strong>国际化应用开发</strong>: 在开发多语言应用时，可以使用此工具快速查看和测试不同语言环境下的日期格式。
            </div>
            <div class="example-item">
                <strong>多语言内容创建</strong>: 为不同国家的用户创建内容时，可以使用此工具确保日期格式符合当地习惯。
            </div>
            <div class="example-item">
                <strong>国际旅行规划</strong>: 在规划国际旅行时，可以查看目的地国家的日期表示方式，避免日期混淆。
            </div>
            <div class="example-item">
                <strong>跨国业务协作</strong>: 在与不同国家的合作伙伴沟通时，可以使用此工具确保日期信息的准确传达。
            </div>
        </div>
    </div>

    <script>
        // 原始的dayName函数
        const dayName = (date, locale) =>
            date.toLocaleDateString(locale, { weekday: 'long' });

        // 扩展函数：获取月份名称
        const monthName = (date, locale) =>
            date.toLocaleDateString(locale, { month: 'long' });

        // 扩展函数：获取完整日期格式
        const fullDate = (date, locale) =>
            date.toLocaleDateString(locale, {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

        // 扩展函数：获取短格式日期
        const shortDate = (date, locale) =>
            date.toLocaleDateString(locale, {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });

        // 支持的语言列表
        const supportedLocales = [
            { code: 'zh-CN', name: '中文 (中国)' },
            { code: 'en-US', name: '英文 (美国)' },
            { code: 'ja-JP', name: '日文 (日本)' },
            { code: 'ko-KR', name: '韩文 (韩国)' },
            { code: 'de-DE', name: '德文 (德国)' },
            { code: 'fr-FR', name: '法文 (法国)' },
            { code: 'es-ES', name: '西班牙文 (西班牙)' },
            { code: 'it-IT', name: '意大利文 (意大利)' },
            { code: 'ru-RU', name: '俄文 (俄罗斯)' },
            { code: 'ar-SA', name: '阿拉伯文 (沙特阿拉伯)' }
        ];

        // DOM元素
        const dateInput = document.getElementById('date-input');
        const localeSelect = document.getElementById('locale-select');
        const weekdayResult = document.getElementById('weekday-result');
        const monthResult = document.getElementById('month-result');
        const fullDateResult = document.getElementById('full-date-result');
        const shortDateResult = document.getElementById('short-date-result');
        const localeGrid = document.getElementById('locale-grid');
        const copyBtn = document.getElementById('copy-btn');

        // 设置日期输入框默认值为今天
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        dateInput.value = `${year}-${month}-${day}`;

        // 更新结果显示
        function updateResults() {
            const selectedDate = new Date(dateInput.value);
            const selectedLocale = localeSelect.value;

            // 更新主要结果
            weekdayResult.textContent = dayName(selectedDate, selectedLocale);
            monthResult.textContent = monthName(selectedDate, selectedLocale);
            fullDateResult.textContent = fullDate(selectedDate, selectedLocale);
            shortDateResult.textContent = shortDate(selectedDate, selectedLocale);

            // 更新多语言对照表
            localeGrid.innerHTML = '';
            supportedLocales.forEach(locale => {
                const localeItem = document.createElement('div');
                localeItem.className = 'result-item';
                localeItem.innerHTML = `
                    <div class="label">${locale.name}:</div>
                    <div class="value">${dayName(selectedDate, locale.code)}</div>
                `;
                localeGrid.appendChild(localeItem);
            });
        }

        // 复制日期信息
        copyBtn.addEventListener('click', () => {
            const selectedDate = new Date(dateInput.value);
            const selectedLocale = localeSelect.value;
            const localeName = supportedLocales.find(l => l.code === selectedLocale).name;

            const textToCopy = `日期信息 (${localeName}):\n` +
                `星期名称: ${weekdayResult.textContent}\n` +
                `月份名称: ${monthResult.textContent}\n` +
                `完整日期: ${fullDateResult.textContent}\n` +
                `短格式日期: ${shortDateResult.textContent}`;

            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    const originalText = copyBtn.textContent;
                    copyBtn.textContent = '复制成功!';
                    setTimeout(() => {
                        copyBtn.textContent = originalText;
                    }, 2000);
                })
                .catch(err => {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制');
                });
        });

        // 事件监听
        dateInput.addEventListener('change', updateResults);
        localeSelect.addEventListener('change', updateResults);

        // 初始化显示
        updateResults();

        // 控制台输出原始函数示例（保留原始代码的功能）
        console.log('原始dayName函数示例:');
        console.log(dayName(new Date()));
        console.log(dayName(new Date('09/23/2020'), 'de-DE'));
    </script>
</body>

</html>